// @ts-nocheck
import React from 'react'
import ReactDOM from 'react-dom'
import {
    Designer,
    DesignerToolsWidget,
    ViewToolsWidget,
    Workspace,
    OutlineTreeWidget,
    DragSourceWidget,
    HistoryWidget,
    MainPanel,
    CompositePanel,
    WorkspacePanel,
    ToolbarPanel,
    ViewportPanel,
    ViewPanel,
    SettingsPanel,
    ComponentTreeWidget,
} from '@designable/react'
import { SettingsForm } from '@designable/react-settings-form'
import {
    createDesigner,
    GlobalRegistry,
    Shortcut,
    KeyCode,
} from '@designable/core'
import { createDesignableField, createDesignableForm } from './src'
import {
    LogoWidget,
    ActionsWidget,
    PreviewWidget,
    SchemaEditorWidget,
    MarkupSchemaWidget,
} from './widgets'
import { saveSchema } from './service'
import 'antd/dist/antd.less'
import './index.less'
import {gridSVG} from "../../components/SVG";

GlobalRegistry.registerDesignerLocales({
    'zh-CN': {
        sources: {
            Inputs: '表单组件',
            Layouts: '布局组件',
            Arrays: '自增组件',
            Displays: '展示组件',
        },
    },
    'en-US': {
        sources: {
            Inputs: 'Forms',
            Layouts: 'Layouts',
            Arrays: 'Arrays',
            Displays: 'Displays',
        },
    },
})

const Root = createDesignableForm({
    registryName: 'Root',
})

const DesignableField = createDesignableField({
    registryName: 'DesignableField',
})

const SaveShortCut = new Shortcut({
    codes: [
        [KeyCode.Meta, KeyCode.S],
        [KeyCode.Control, KeyCode.S],
    ],
    handler(ctx) {
        saveSchema(ctx.engine)
    },
})

const engine = createDesigner({
    shortcuts: [SaveShortCut],
})

const App = () => {
    return (
        <>
            <Designer engine={engine}>
                <MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
                    <CompositePanel>
                        <CompositePanel.Item title="panels.Component" icon="Component">
                            <DragSourceWidget title="sources.Inputs" name="inputs" />
                            <DragSourceWidget title="sources.Layouts" name="layouts" />
                            <DragSourceWidget title="sources.Arrays" name="arrays" />
                            <DragSourceWidget title="sources.Displays" name="displays" />
                        </CompositePanel.Item>
                        <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
                            <OutlineTreeWidget />
                        </CompositePanel.Item>
                        {/*<CompositePanea'pl.Item title="panels.History" icon="History">*/}
                        {/*    <HistoryWidget />*/}
                        {/*</CompositePanel.Item>*/}
                    </CompositePanel>
                    <Workspace id="form">
                        <WorkspacePanel>
                            <ToolbarPanel>
                                <DesignerToolsWidget />
                                <ViewToolsWidget
                                    use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
                                />
                            </ToolbarPanel>
                            <ViewportPanel>
                                <ViewPanel type="DESIGNABLE">
                                    {() => (
                                        <ComponentTreeWidget components={{Root, DesignableField,}}/>
                                    )}
                                </ViewPanel>
                                <ViewPanel type="JSONTREE" scrollable={false}>
                                    {(tree, onChange) => (
                                        <SchemaEditorWidget tree={tree} onChange={onChange} />
                                    )}
                                </ViewPanel>
                                <ViewPanel type="MARKUP" scrollable={false}>
                                    {(tree) => <MarkupSchemaWidget tree={tree} />}
                                </ViewPanel>
                                <ViewPanel type="PREVIEW">
                                    {(tree) => <PreviewWidget tree={tree} />}
                                </ViewPanel>
                            </ViewportPanel>
                        </WorkspacePanel>
                    </Workspace>
                    <SettingsPanel title="panels.PropertySettings">
                        <SettingsForm uploadAction="http://192.168.1.41:27018/api/common/uploadMulti" scope={{headers: {'Authorization': 222}}}/>
                    </SettingsPanel>
                </MainPanel>
            </Designer>
        </>

    )
}

export default App;
